ngView ( directive in module ng )

Description

Overview

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout ( index.html ) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Additionally, you can also provide animations via the ngAnimate attribute to animate the enter and leave effects.

Usage

as element (see IE restrictions)
<ng-view>
</ng-view>
as attribute
<ANY ng-view>
   ...
</ANY>
as class
<ANY class="ng-view">
   ...
</ANY>

Directive info

  • This directive creates new scope.

Events

Example

Choose: Moby | Moby: Ch1 | Gatsby | Gatsby: Ch4 | Scarlet Letter

<div
  ng-view
  class="example-animate-container"
  ng-animate="{enter: 'example-enter', leave: 'example-leave'}">


$location.path() = {{main.$location.path()}}
$route.current.templateUrl = {{main.$route.current.templateUrl}}
$route.current.params = {{main.$route.current.params}}
$route.current.scope.name = {{main.$route.current.scope.name}}
$routeParams = {{main.$routeParams}}

controller: {{book.name}}
Book Id: {{book.params.bookId}}

controller: {{chapter.name}}
Book Id: {{chapter.params.bookId}}
Chapter Id: {{chapter.params.chapterId}}

.example-leave-setup, .example-enter-setup { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; }

.example-animate-container { position:relative; height:100px; }

.example-animate-container > * { display:block; width:100%; border-left:1px solid black;

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;

}

.example-enter-setup { left:100%; } .example-enter-setup.example-enter-start { left:0; }

.example-leave-setup { } .example-leave-setup.example-leave-start { left:-100%; }

angular.module('ngView', [], function($routeProvider, $locationProvider) { $routeProvider.when('/Book/:bookId', { templateUrl: 'book.html', controller: BookCntl, controllerAs: 'book' }); $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCntl, controllerAs: 'chapter' });

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

});

function MainCntl($route, $routeParams, $location) { this.$route = $route; this.$location = $location; this.$routeParams = $routeParams; }

function BookCntl($routeParams) { this.name = "BookCntl"; this.params = $routeParams; }

function ChapterCntl($routeParams) { this.name = "ChapterCntl"; this.params = $routeParams; }

it('should load and compile correct template', function() { element('a:contains("Moby: Ch1")').click(); var content = element('.doc-example-live [ng-view]').text(); expect(content).toMatch(/controller\: ChapterCntl/); expect(content).toMatch(/Book Id\: Moby/); expect(content).toMatch(/Chapter Id\: 1/);

element('a:contains("Scarlet")').click();
content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/);

});